
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>svg波浪动画，简单动态波浪效果</title>
  <!-- css样式部分 -->
  <style>
    /* 这边控制波浪速度 */
    use {
    animation: move-forever 2s linear infinite;
    }
    use:nth-child(2) {
    animation-duration: 2.5s;
    animation-delay: -1.5s;
    }
    use:nth-child(1) {
    animation-duration: 5s;
    }

    @keyframes move-forever {
    0% {
        transform: translate(-2px, 0);
    }
    100% {
        transform: translate(0px, 0);
    }
    }
    body {
    margin: 0;
    overflow: hidden;
    background-color: #123;
    }
    svg {
    width: 100vw;
    height: 100vh;
    }
  </style>
</head>
<body>
<!-- html代码 -->
<svg 
 viewBox="0 0 2 1" 
 preserveAspectRatio="none">
  <defs>
    <path id="w" 
      d="
      m0 1v-.5 
      q.5.5 1 0
      t1 0 1 0 1 0
      v.5z" />
  </defs>
  <g>
   <use href="#w" y=".0" fill="#2d55aa" />
   <use href="#w" y=".1" fill="#3461c1" />
   <use href="#w" y=".2" fill="#4579e2" />
  </g>
 </svg>
</body>
</html>
